light mode
night mode
অ্যাঙ্গুলার (Angular)
Angular পরিচিতি Angular কি? Angular এর ইতিহাস এবং সংস্করণ (AngularJS থেকে Angular 15 পর্যন্ত) Angular এর বৈশিষ্ট্য এবং সুবিধা ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ Angular CLI ইনস্টল করা Angular এর স্থাপত্য Angular কম্পোনেন্ট মডিউল (NgModules) টেম্পলেট এবং ভিউ ডিরেক্টিভস সার্ভিস এবং ডিপেন্ডেন্সি ইনজেকশন রাউটিং এবং নেভিগেশন Angular কম্পোনেন্টস CLI দিয়ে কম্পোনেন্ট তৈরি করা কম্পোনেন্ট ডেকোরেটর কম্পোনেন্ট লাইফসাইকেল হুকস ডাটা বাইন্ডিং (ইন্টারপোলেশন, প্রোপার্টি বাইন্ডিং, ইভেন্ট বাইন্ডিং, টু-ওয়ে বাইন্ডিং) কম্পোনেন্টের টেম্পলেট এবং স্টাইলস Angular মডিউলস রুট মডিউল (AppModule) ফিচার মডিউলস শেয়ার্ড মডিউলস ল্যাজি লোডিং মডিউলস মডিউল অর্গানাইজেশন বেস্ট প্রাকটিসেস টেম্পলেট এবং ডিরেক্টিভস টেম্পলেট সিনট্যাক্স স্ট্রাকচারাল ডিরেক্টিভস (ngIf, ngFor, ngSwitch) অ্যাট্রিবিউট ডিরেক্টিভস (ngClass, ngStyle) কাস্টম ডিরেক্টিভ তৈরি করা Angular পাইপস পাইপ কি? বিল্ট-ইন পাইপস (DatePipe, UpperCasePipe ইত্যাদি) কাস্টম পাইপ তৈরি করা অ্যাসিঙ্ক পাইপ Angular ফর্মস টেম্পলেট-ড্রিভেন ফর্মস রিয়্যাক্টিভ ফর্মস ফর্ম ভ্যালিডেশন (বিল্ট-ইন এবং কাস্টম) Form Group এবং Form Controls ফর্ম সাবমিশন হ্যান্ডলিং রাউটিং এবং নেভিগেশন রাউট সেটআপ করা Router Module এবং Route Configuration Route Parameters এবং Query Parameters চাইল্ড রাউটস Lazy Loading Routes রাউট গার্ডস (CanActivate, CanDeactivate ইত্যাদি) রাউট রেজলভার সার্ভিস এবং ডিপেন্ডেন্সি ইনজেকশন সার্ভিস তৈরি এবং ব্যবহার Injectable ডেকোরেটর হায়ারার্কিক্যাল ডিপেন্ডেন্সি ইনজেকশন সিঙ্গেলটন সার্ভিসেস Angular এর HTTP ক্লায়েন্ট HttpClientModule পরিচিতি HTTP রিকোয়েস্ট (GET, POST, PUT, DELETE) করা HTTP রিকোয়েস্টে ত্রুটি হ্যান্ডলিং Angular এর Interceptors Observables এবং RxJS ব্যবহার RxJS এবং Observables RxJS কি? Observables, Operators, এবং Subjects কমন RxJS অপারেটরস (map, filter, mergeMap ইত্যাদি) অ্যাসিঙ্ক অপারেশন হ্যান্ডলিং RxJS তে ত্রুটি হ্যান্ডলিং কম্পোনেন্ট ইন্টারঅ্যাকশন Parent-Child কম্পোনেন্ট কমিউনিকেশন (Input, Output) ViewChild এবং ContentChild সার্ভিস-ভিত্তিক কমিউনিকেশন EventEmitter ব্যবহার Angular অ্যানিমেশনস অ্যানিমেশন এর বেসিক ধারণা অ্যানিমেশন তৈরি এবং কনফিগার করা অ্যানিমেশন ট্রিগার এবং স্টেট Keyframes এবং Transitions Angular রাউট গার্ডস রাউট গার্ড কি? গার্ডের প্রকারভেদ (CanActivate, CanDeactivate, Resolve ইত্যাদি) রাউট গার্ড ইমপ্লিমেন্ট করা Lazy Loading এর সাথে গার্ড ব্যবহার Angular টেস্টিং কম্পোনেন্ট ইউনিট টেস্টিং ডিপেন্ডেন্সি ইনজেকশন সহ সার্ভিস টেস্টিং Protractor দিয়ে End-to-End টেস্টিং ডিরেক্টিভ এবং পাইপ টেস্টিং HTTP রিকোয়েস্ট মকিং Angular CLI কমন Angular CLI কমান্ডস CLI দিয়ে কম্পোনেন্ট, সার্ভিস, মডিউল তৈরি Angular CLI Workspaces Angular অ্যাপ্লিকেশন বিল্ড এবং সার্ভ করা Angular Material Angular Material পরিচিতি Angular Material সেটআপ Material কম্পোনেন্টস (Buttons, Icons, Cards ইত্যাদি) Material Data Table Angular Material থিমিং Angular Flex Layout Flex Layout দিয়ে রেসপনসিভ লেআউট Grid ভিত্তিক লেআউট তৈরি Angular Flexbox ব্যবহার Angular ফর্মস এডভান্সড ডাইনামিক ফর্মস Reactive ফর্মে FormArray কাস্টম ভ্যালিডেটর বিল্ডিং এবং ডিপ্লয়মেন্ট প্রোডাকশনের জন্য অ্যাপ্লিকেশন বিল্ড করা Angular অ্যাপ্লিকেশন অপটিমাইজেশন Ahead-of-Time (AOT) কম্পাইলেশন Backend সার্ভিসের সাথে Angular (Node.js, Spring Boot) Firebase, Netlify, GitHub Pages ইত্যাদিতে অ্যাপ্লিকেশন ডিপ্লয় Angular এর এডভান্সড টপিকস Change Detection Strategy (OnPush vs Default) Web Workers এর সাথে Angular Angular Universal দিয়ে Server-Side Rendering State Management (NgRx) Performance Optimization Techniques

Flex Layout দিয়ে রেসপনসিভ লেআউট

Web Development - অ্যাঙ্গুলার (Angular) - Angular Flex Layout |

Angular-এ Flex Layout লাইব্রেরি ব্যবহার করে সহজেই রেসপনসিভ লেআউট তৈরি করা যায়। Flex Layout একটি শক্তিশালী টুল যা CSS Flexbox এর উপর ভিত্তি করে তৈরি, এবং Angular অ্যাপ্লিকেশনগুলিতে রেসপনসিভ এবং ডাইনামিক লেআউট ডিজাইন করতে সহায়ক। এটি ফ্লেক্সবক্সের সুবিধাগুলোকে Angular অ্যাপ্লিকেশনের টেমপ্লেটে ব্যবহারযোগ্য করে তোলে।

Flex Layout কি?

Flex Layout হল একটি Angular মডিউল, যা ফ্লেক্সবক্সের উপর ভিত্তি করে HTML উপাদানগুলোর অবস্থান ও আকার পরিবর্তন করতে সহায়ক। এর মাধ্যমে আপনি সহজেই বিভিন্ন স্ক্রীন সাইজে উপাদানগুলির প্রস্থ, উচ্চতা, অ্যালাইনমেন্ট, ডিসপ্লে এবং অর্ডার ম্যানেজ করতে পারেন। এটি মোবাইল-ফার্স্ট (mobile-first) ডিজাইনে বিশেষভাবে উপকারী, কারণ এটি রেসপনসিভ ডিজাইন তৈরি করার জন্য অনেক সুবিধা প্রদান করে।

Flex Layout ইনস্টলেশন

Flex Layout ব্যবহার করতে হলে প্রথমে আপনাকে এটি আপনার Angular প্রজেক্টে ইনস্টল করতে হবে।

1. Flex Layout ইনস্টল করা

npm install @angular/flex-layout

2. FlexLayoutModule ইমপোর্ট করা

এরপর, আপনাকে FlexLayoutModule আপনার অ্যাপ মডিউলে ইমপোর্ট করতে হবে।

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    FlexLayoutModule
  ]
})
export class AppModule { }

এখন আপনি Flex Layout এর ডিরেকটিভস আপনার কম্পোনেন্টের টেমপ্লেটে ব্যবহার করতে পারবেন।

Flex Layout এর মূল ডিরেকটিভস

Flex Layout লাইব্রেরি বেশ কিছু গুরুত্বপূর্ণ ডিরেকটিভ প্রদান করে যা ফ্লেক্সবক্সের কার্যকারিতা Angular টেমপ্লেটে যুক্ত করে। এখানে কিছু গুরুত্বপূর্ণ ডিরেকটিভের উদাহরণ দেওয়া হল:

  1. fxLayout: এটি ফ্লেক্স কন্টেইনার তৈরি করে এবং এর মাধ্যমে আপনি কন্টেইনারের দিক (হরিজেন্টাল বা ভারটিকাল) নির্ধারণ করতে পারেন।
  2. fxLayoutAlign: এটি কন্টেইনারের ভিতরের উপাদানগুলির অ্যালাইনমেন্ট কন্ট্রোল করে।
  3. fxFlex: এটি ফ্লেক্স আইটেমের আকার নির্ধারণ করে, অর্থাৎ উপাদানটি কন্টেইনারের মধ্যে কতটুকু জায়গা নেবে।
  4. fxShow / fxHide: এগুলি রেসপনসিভ ডিজাইনে নির্দিষ্ট স্ক্রীন সাইজে উপাদানগুলো দেখানো বা লুকানো যায়।

উদাহরণ: Flex Layout দিয়ে রেসপনসিভ লেআউট

এখানে আমরা একটি রেসপনসিভ লেআউট তৈরি করব, যেখানে ফ্লেক্স কন্টেইনারের মধ্যে কয়েকটি উপাদান থাকবে। এই উপাদানগুলো স্ক্রীন সাইজ অনুসারে সজ্জিত হবে।

1. কম্পোনেন্ট টেমপ্লেট

<div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="center center">
  <div fxFlex="25%" class="box">Box 1</div>
  <div fxFlex="25%" class="box">Box 2</div>
  <div fxFlex="25%" class="box">Box 3</div>
</div>

2. CSS স্টাইল

.box {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}

3. রেসপনসিভ কন্ডিশন যোগ করা

Flex Layout এর মাধ্যমে রেসপনসিভ ডিজাইন সহজেই করা যায়। এটি fxLayout এবং fxFlex ডিরেকটিভের মাধ্যমে বিভিন্ন স্ক্রীন সাইজে উপাদানগুলির অবস্থান এবং আকার পরিবর্তন করতে সাহায্য করে।

<div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="center center">
  <div fxFlex="100%" fxFlex.xs="50%" fxFlex.sm="33%" fxFlex.md="25%" class="box">
    Box 1
  </div>
  <div fxFlex="100%" fxFlex.xs="50%" fxFlex.sm="33%" fxFlex.md="25%" class="box">
    Box 2
  </div>
  <div fxFlex="100%" fxFlex.xs="50%" fxFlex.sm="33%" fxFlex.md="25%" class="box">
    Box 3
  </div>
</div>

এখানে, আমরা:

  • fxFlex="100%" সেট করেছি যেটি ডিফল্ট হয়ে থাকবে (যখন স্ক্রীন সাইজ ছোট হবে)।
  • fxFlex.xs="50%" এবং fxFlex.sm="33%" সেট করা হয়েছে, যার মাধ্যমে ছোট স্ক্রীনে উপাদানগুলো 50% প্রস্থ নেবে এবং স্মল স্ক্রীনে 33% প্রস্থ নেবে।
  • fxFlex.md="25%" সেট করা হয়েছে, যার মাধ্যমে মিডিয়াম স্ক্রীনে প্রতিটি বক্স 25% প্রস্থ নিবে।

অন্যান্য উপকারিতা

  1. অবজেক্ট অ্যালাইনমেন্ট: fxLayoutAlign ব্যবহার করে উপাদানগুলির অ্যালাইনমেন্ট করা যায়, যেমন fxLayoutAlign="start center" বা fxLayoutAlign="center end"।
  2. আইটেম অর্ডার: Flex Layout ডিরেকটিভের মাধ্যমে আপনি আইটেমগুলোর অর্ডারও নির্ধারণ করতে পারেন, যেমন fxFlexOrder="2"।
  3. ডিভাইস অনুসারে শো বা হাইড: fxShow এবং fxHide ডিরেকটিভ ব্যবহার করে রেসপনসিভ ডিজাইনে নির্দিষ্ট স্ক্রীন সাইজে উপাদানগুলো দেখানো বা লুকানো যায়।
<div fxLayout="row">
  <div fxFlex="50%" fxShow.xs="false" fxShow.md="true" class="box">Visible on Medium+</div>
  <div fxFlex="50%" fxHide.xs="false" fxHide.md="true" class="box">Visible on Small</div>
</div>

উপসংহার

Angular Flex Layout একটি খুবই শক্তিশালী টুল যা আপনাকে রেসপনসিভ ডিজাইন তৈরির জন্য Flexbox এর সুবিধা প্রদান করে। এটি দ্রুত এবং কার্যকরীভাবে লেআউট তৈরি করতে সহায়ক, বিশেষ করে যখন আপনার অ্যাপ্লিকেশনটি বিভিন্ন স্ক্রীন সাইজে কাজ করবে। fxLayout, fxFlex, এবং fxLayoutAlign এর মাধ্যমে আপনি একাধিক ডিভাইসে উপাদানগুলির অবস্থান, আকার, এবং অ্যালাইনমেন্ট সহজেই কনফিগার করতে পারেন।

Content added By
Md Azizur Rahman

Read more

Flex Layout দিয়ে রেসপনসিভ লেআউট

or

Don't have an account? Register

Promotion